<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hello Vue</title>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet" />
</head>
<body>
  <div id="app" class="w-80 mx-auto">
    <h1 v-cloak class="mt-10 text-green-500 text-4xl text-center">{{msg}}</h1>
    <filters></filters>
    <filters-demo></filters-demo>
  </div>

  <script>
    const Panel = {
      props: {
        title: {
          type: String,
          required: false,
          default: '',
        },
        subTitle: {
          type: String,
          required: false,
          default: '',
        },
      },
      template: `
        <div class="flex flex-col my-4 px-8 pb-8 pt-4  bg-gray-100  rounded shadow-inner">
          <div class="flex  mb-2 border-b-2 border-green-200">
            <div class="text-xl text-green-500 ">{{title}}</div>
            <div class="flex items-end ml-2 text-sm text-green-200">{{subTitle}}</div>
          </div>
          <slot></slot>
        </div>
      `,
    }

    const TButton = {
      props: {
        size: {
          type: String,
          required: false,
          default: 'med',
        },
      },
      data: () => ({
        sizeClasslist: '',
      }),
      methods: {
        handleSize() {
          switch (this.size) {
            case 'sm':
              this.sizeClasslist = 'px-2 text-sm'
              break
            case 'lg':
              this.sizeClasslist = 'px-8 py-4 text-2xl'
              break
            default:
              this.sizeClasslist = 'px-4 py-2 text-base'
              break
          }
        },
      },
      created() {
        this.handleSize()
      },
      template: `
          <button
            class="inline-flex items-center  border border-green-400 leading-6 font-medium rounded-md text-green-800 bg-white hover:text-green-500 focus:border-green-300 focus:ring focus:ring-green-200 focus:outline-none active:bg-green-700  transition ease-in-out duration-150"
            :class="sizeClasslist"
          ><slot></slot></button>
        `,
    }

    const Filters = {
      components: {
        panel: Panel
      },
      data: () => ({
        num1: 10,
        num2: 20
      }),
      filters: {
        plusplus(n) {
          return "Plus: " + (++n)
        },
        subsub(n) {
          return "Sub: " + (--n)
        }
      },
      template: `
        <panel title="过滤器" subTitle="Vue3 已移除">
          <div>原始值：{{num1}}</div>
          <div>过滤 1：{{num1 | plusplus}}</div>
          <div>过滤 2：{{num1 | subsub}}</div>
        </panel>
      `
    }

    const FiltersDemo = {
      components: {
        panel: Panel
      },
      data: () => ({
        tel: ''
      }),
      filters: {
        telFilter(v) {
          return  v.replace(/^(.{3})(.*)(.{4})$/, '$1-$2-$3')
        }
      },
      template: `
        <panel title="过滤器练习">
          <div>电话：<input 
            type="text" 
            class="p-1 ml-2 text-sm border-gray-400 border-2 rounded"
            v-model="tel"/></div>
          <div class="mt-2">过滤后：{{tel | telFilter}}</div>
        </panel>
      `
    }
    
    const DynmicComponents = {
      components: {
        panel: Panel
      },
      data: () => ({
        num1: 10,
        num2: 20
      }),
      filters: {
        plusplus(n) {
          return "Plus: " + (++n)
        },
        subsub(n) {
          return "Sub: " + (--n)
        }
      },
      template: `
        <panel title="过滤器" subTitle="Vue3 已移除">
          <div>原始值：{{num1}}</div>
          <div>过滤 1：{{num1 | plusplus}}</div>
          <div>过滤 2：{{num1 | subsub}}</div>
        </panel>
      `
    }

    new Vue({
      el: '#app',
      components: {
        filters: Filters,
        'filters-demo':FiltersDemo
      },
      data: {
        msg: '🍚 Vue Day 4',
      }
    })
  </script>
</body>
</html>
